<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>请选择省份、城市</title>
<!--指定设备的宽度-->
<meta name="viewport"  content="width=device-width,  initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head> 
<body> 
<div data-role="page" id="pageone">
  <div data-role="header">
  <h1>请选择省份和城市</h1>
  </div>

  <div data-role="content">
    <form id="myform">
      <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
          <legend>选择省份</legend>
            <label for="province">省份</label>
            <!--定义一个选择省份的菜单-->            
            <select name="province" id="province">       
              <option value="广东">广东</option>
              <option value="广西">广西</option>
              <option value="湖南">湖南</option>            
            </select>
            <!--定义一个选择城市的菜单-->
            <label for="city">选择城市</label>
            <!--允许多选，不使用原生的菜单样式-->
            <select name="city" id="city" multiple data-native-menu="false">
            </select>
        </fieldset>
      </div>
      <!--定义一个显示选择项的按钮-->
      <input type="button" data-inline="true" id="btnsend" value="显示您的选择">
    </form>
  </div>  
   <script type="text/javascript">  
       var area=[          //定义一个城市数组，每一个省份对应一个城市子数组
	   {"省份":"湖南","城市":["长沙","常德","益阳","株州","湘潭"]},
	   {"省份":"广东","城市":["广州","深圳","珠海","中山","东莞"]},	   
	   {"省份":"广西","城市":["南宁","桂林","柳州","漓江","北海"]}	   	   
	   ];      
       //在页面初始加载时，对选择框进行初始设置 
	   $("#pageone").bind("pagebeforeshow",function(){	
           var myselect = $("#province");     //得到省份选择列表对象			   
           var mycity = $("#city");			   //得到城市选择列表对象	
	       $('#province').unbind('change');   //取消绑定选择改变事件
		   //重新绑定选择绑定事件  		    
	       $("#province").bind('change',function(event){	
		       //获取当前选择的文本	 
                var str=myselect.children('option:selected').text();               		 
	    	    var selOpt = $("#city option");      //获取option列表
     	        selOpt.remove();	                  //移除现有的option数据	
				//循环数——用来查找当前选中的省份		   
                for(var i=0, len=area.length; i<len; i++) {;
					var provstr=area[i]["省份"];
					if (provstr==str){               //如果省份匹配
						cities=area[i]["城市"];      //则获取城市数组
						//循环城市数组，并添加到城市选择列表
						for (var j=0,clen=cities.length;j<clen;j++){
						   mycity.append("<option value='"+cities[j]+"'>"+cities[j]+"</option>");	
						}
					}
			 	   mycity[0].selectedIndex=0;		 //选中第1个城市			
                   myselect.selectmenu('refresh');	 //刷新2个列表框			 
                   mycity.selectmenu('refresh');						   	
                }	 		
		   });			   
           $('#province').trigger( "change" );	     //强制触发省份列表框的change事件		
	       $('#btnsend').unbind('click');   //取消绑定按钮单击事件
		   //重新绑定按钮单击事件  		    
	       $("#btnsend").bind('click',function(event){	
		     //获取当前选择的省份文本
			alert("省份 :  "+myselect.children('option:selected').text() +
			 "   城市 : "+mycity.val());	//获取当前多选的城市数组		
		   });						   		   		      		  	  		  
	   });   
   </script>    
</div>
</body>
</html>
